<template>
  <div class="node-container" style="position: relative">
    <NodeResizer
        @resize-start="handleResizeStart"
        @resize="handleResize"
        @resizeEnd="handleResizeEnd"
        min-width="100"
        min-height="30"
        handle-style="color:red"
        :is-visible="nodeResizerIsVisible"
    />
    <node-graphic
        tabindex="0"
        :graphic-config="data.graphicConfig"
        style="position: relative"
        @focus="nodeResizerIsVisible=true"
        @blur="nodeResizerIsVisible=false"
    />

    <!--    自定义小圆圈，可以指定多个，id必须不同，在使用onConnect事件是，加入到连线是需要同时指定sourceHandle和targetHandle-->
    <Handle id="handle1" class="handle" type="source" :position="Position.Right"/>
    <Handle id="handle2" class="handle" type="source" :position="Position.Left"/>
    <Handle id="handle3" class="handle" type="source" :position="Position.Bottom"/>
    <Handle id="handle4" class="handle" type="source" :position="Position.Top"/>
    <Handle id="handle5" class="handle" type="target" :position="Position.Right"/>
    <Handle id="handle6" class="handle" type="target" :position="Position.Left"/>
    <Handle id="handle7" class="handle" type="target" :position="Position.Bottom"/>
    <Handle id="handle8" class="handle" type="target" :position="Position.Top"/>
  </div>
</template>
<script setup>
import {computed, ref} from 'vue'
import {Handle, Position} from '@vue-flow/core'
import {NodeResizer} from '@vue-flow/node-resizer'
import NodeGraphic from "@/components/NodeGraphic.vue";
import '@vue-flow/node-resizer/dist/style.css'

const props = defineProps({
  position: {
    type: Object
  },
  data: {
    type: Object
  }
})

const x = computed(() => `${Math.round(props.position.x)}px`)
const y = computed(() => `${Math.round(props.position.y)}px`)

//重置大小是否显示
const nodeResizerIsVisible = ref(false);

const handleResizeStart = e => {

}

const handleResize = e => {
  console.log("handleResize", e)
  props.data.graphicConfig.style.width = e.params.width + "px";
  props.data.graphicConfig.style.height = e.params.height + "px";
}

const handleResizeEnd = e => {

}
</script>


<style>
.node-container {
  position: relative;
  display: inline-block;
}

.handle {
  opacity: 0;
}

/* 使用伪元素实现可视化的handle */
.handle::after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.node-container:hover .handle {
  opacity: 1;
}

</style>

<style>
.vue-flow__handle {
  width: 0; /* 关键修改 */
  height: 0; /* 关键修改 */
  min-height: 0;
  min-width: 0;
  border: none;
}

</style>